<template>
  <div class="mainDiv">
    <el-container class="main_container">
    <el-main>
    <el-form ref="form" :model="form" :rules="rules" label-width="130px">
      <el-row :gutter="15">
        <el-col :span="16">
          <el-card style="margin-bottom: 15px;">
              <div slot="header" class="clearfix">
                <span>地址信息</span>
              </div>
              <el-row :gutter="15">
                <el-col :span="8">
                  <el-form-item label="承运商" prop="carrierId">
                    <el-select v-model="form.carrierId" placeholder="请选择承运商" class="input-width" :disabled="!form.isShow">
                      <el-option v-for="item in carrierOptions" :key="item.id" :label="item.nickName" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="客户" prop="clientId">
                    <el-select v-model="form.clientId" placeholder="请选择客户" class="input-width" @change="clientChange">
                      <el-option v-for="item in clientOptions" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="联系人" prop="contacts">
                    <el-input v-model="form.contacts" placeholder="请输入联系人"  class="input-width"/>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="15">
                <el-col :span="8">
                  <el-form-item label="联系电话" prop="tel">
                    <el-input v-model="form.tel" placeholder="请输入联系电话"  class="input-width"/>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="类型">
                    <el-radio-group v-model="form.type">
                      <el-radio v-for="dict in dict.type.tms_address_type" :key="dict.value" :label="dict.value">
                        {{dict.label}}</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="15">
                <el-col>
                  <el-form-item label="省/市/区县" prop="provincecode">
                    <el-select
                      v-model="form.provincecode"
                      @change="getAreaList($event, 2)"
                      filterable
                      placeholder="省"
                       class="input-width"
                    >
                      <el-option
                        v-for="item in provinceOptions"
                        :key="item.areaId"
                        :label="item.areaName"
                        :value="item.areaId"
                        :disabled="item.status == 1"
                      ></el-option>
                    </el-select>
                    <el-select
                      v-model="form.citycode"
                      @change="getAreaList($event, 3)"
                      filterable
                      placeholder="市"
                      clearable
                      class="input-width"
                    >
                      <el-option
                        v-for="item in cityOptions"
                        :key="item.areaId"
                        :label="item.areaName"
                        :value="item.areaId"
                        :disabled="item.status == 1"
                      ></el-option>
                    </el-select>
                    <el-select
                      v-model="form.areacode"
                      filterable
                      placeholder="区"
                      clearable
                      class="input-width"
                    >
                      <el-option
                        v-for="item in areaOptions"
                        :key="item.areaId"
                        :label="item.areaName"
                        :value="item.areaId"
                        :disabled="item.status == 1"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
                  <el-form-item label="市" prop="citycode">

                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="县/区" prop="areacode">

                  </el-form-item>
                </el-col> -->
              </el-row>
              <el-row :gutter="15">
                <el-col :span="24">
                  <el-form-item label="地址" prop="addr">
                    <amap-input
                      placeholder="请输入地址"
                      v-model="form.addr"
                      @getPosition="getPosition"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="15">
                <!-- <el-col :span="8">
                  <el-form-item label="经度" prop="lng">
                    <el-input v-model="form.lng" placeholder="请输入经度" />
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label="纬度" prop="lat">
                    <el-input v-model="form.lat" placeholder="请输入纬度" />
                  </el-form-item>
                </el-col> -->
                <el-col :span="8">
                  <el-form-item label="设为默认">
                    <el-radio-group v-model="form.flag">
                      <el-radio v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.value">{{dict.label}}
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="状态" prop="status">
                    <el-select v-model="form.status" placeholder="请选择状态">
                      <el-option v-for="dict in dict.type.sys_common_status" :key="dict.value" :label="dict.label"
                        :value="dict.value"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
          </el-card>
        </el-col>
        <el-col :span="8">
          <amap-select-point :selectLon="selectLon" :selectLat="selectLat" :fence="form.fence" @clickCallback="clickMap"/>
        </el-col>
      </el-row>
    </el-form>
    </el-main>
    <el-footer>
      <div class="footerDivClass">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="close()">取 消</el-button>
      </div>
    </el-footer>
    </el-container>
  </div>
</template>

<script>
  import {initBean,getAddress,addAddress, updateAddress } from "@/api/tms/address";
  import {listClient } from '@/api/tms/client';
  import {treeselect} from '@/api/system/dept';
  import {listCarrier} from '@/api/tms/carrier';
  import Treeselect from "@riophae/vue-treeselect";
  import { listSysArea } from "@/api/system/sysArea";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import AmapSelectPoint from "@/components/AmapSelectPoint";
  import AmapInput from "@/components/AmapInput";
  export default {
    dicts: ['sys_common_status', 'sys_del_flag', 'sys_yes_no', 'tms_address_type'],
    components: {
        Treeselect,
        AmapSelectPoint,
        AmapInput
    },
    data(){
      return{
        clientOptions:[],
        carrierOptions:[],
        deptOptions:[],
        provinceOptions:[],
        cityOptions:[],
        areaOptions:[],
        countyOptions:[],

        selectLon: "",//地址选择后获取的经度传参
        selectLat: "",//地址选择后获取的纬度传参

        // 表单参数
        form: {},

        // 表单校验
        rules: {
          carrierId: [{
            required: true,
            message: "承运商不能为空",
            trigger: "blur"
          }],
          clientId: [{
            required: true,
            message: "客户不能为空",
            trigger: "blur"
          }],
          type: [{
            required: true,
            message: "类型不能为空",
            trigger: "blur"
          }],
          contacts: [{
            required: true,
            message: "联系人不能为空",
            trigger: "blur"
          }],
          tel: [{
            required: true,
            message: "联系电话不能为空",
            trigger: "blur"
          }],
          provincecode: [{
            required: true,
            message: "省份不能为空",
            trigger: "blur"
          }],
          citycode: [{
            required: true,
            message: "市不能为空",
            trigger: "blur"
          }],
          areacode: [{
            required: true,
            message: "县/区不能为空",
            trigger: "blur"
          }],

          addr: [{
            required: true,
            message: "地址不能为空",
            trigger: "blur"
          }],
        }

      }
    },
    created() {
      this.reset();
      this.getClient();
      this.getCarrier();
      this.getAreaList(0, 1);
       const id = this.$router.currentRoute.params.id;
       if(id != undefined && id != ''){
         this.getAddressInfo(id)
       }else{
         this.getInit();
       }
    },
    watch:{
      'form.carrierId':{
        handler(newVal){
          if(newVal){
            this.getClient(newVal);
          }
        }
      }
    },
    methods:{
      getInit(){
        initBean().then(response=>{
          this.form = response.data;
        })
      },
      getAddressInfo(id){
        getAddress(id).then(response=>{
          this.form = response.data;
          this.form.provincecode = parseInt(this.form.provincecode);
          this.form.citycode = parseInt(this.form.citycode);
          this.form.areacode = parseInt(this.form.areacode);

          this.getAreaList(0, 1);
          this.getAreaList(this.form.provincecode, 2);
          this.getAreaList(this.form.citycode, 3);
          this.getAreaList(this.form.areacode, 4);
          this.selectLon = this.form.lng;
          this.selectLat = this.form.lat;
        })
      },
      /** 查询货主列表*/
      getClient(carrierId){
        listClient({carrierId:carrierId}).then(response => {
          this.clientOptions = response.rows;
        })
      },
      /**查询承运商列表 */
      getCarrier(){
        listCarrier().then(response=>{
          this.carrierOptions = response.rows;
        })
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
          treeselect().then(response => {
            this.deptOptions = response.data;
          });
      },
      clientChange(e){
        let form  = this.form;
        this.clientOptions.forEach(item=>{
          if(item.id == e){
            Object.keys(form).forEach(key=>{
              if(key != 'id'){
                	form[key] = item[key] == undefined ? form[key] : item[key]
                	if(item['address']){
                	  form['addr'] = item['address'];
                	}
              }

            })
            form.provincecode = parseInt(form.provincecode);
            form.citycode = parseInt(form.citycode);
            form.areacode = parseInt(form.areacode);

            this.getAreaList(0, 1);
            this.getAreaList(form.provincecode, 2);
            this.getAreaList(form.citycode, 3);
            this.getAreaList(form.areacode, 4);
          }
        })
      },
      //省市区筛选
      getAreaList(parentId, level) {
        listSysArea(Object({ parentId: parentId, levels: level })).then(
          (response) => {
            if (level == 1) {
              this.provinceOptions = response.data;
            } else if (level == 2) {
              this.cityOptions = response.data;
            } else if (level == 3) {
              this.areaOptions = response.data;
            } else if (level == 4) {
              this.countyOptions = response.data;
            }
          }
        );
      },
      //详细地址和地图操作
      getPosition(val) {
        if ("" != val && undefined != val && null != val) {
          this.form.address = val.full;
          if (
            null != val &&
            undefined != val &&
            undefined != val.location &&
            null != val.location
          ) {
            this.form.lng = String(val.location.lng);
            this.selectLon = this.form.lng;
            this.form.lat = String(val.location.lat);
            this.selectLat = this.form.lat;
          }
        } else {
          this.form.address = "";
          this.form.lng = "";
          this.form.lat = "";
        }
      },
      clickMap(val) {
        this.form.addr = val.address;
        this.form.lng = val.lng;
        this.form.lat = val.lat;
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          deptId: undefined,
          carrierId: undefined,
          clientId: undefined,
          type: "0",
          contacts: undefined,
          tel: undefined,
          province: undefined,
          city: undefined,
          area: undefined,
          provincecode: undefined,
          citycode: undefined,
          areacode: undefined,
          addr: undefined,
          lng: undefined,
          lat: undefined,
          flag: "Y",
          status: undefined,
        };
        this.resetForm("form");
      },
      /** 关闭按钮 */
      close() {
        const obj = {
          path: "/tms/address",
          query: { t: Date.now(), pageNum: this.$route.query.pageNum },
        };
        this.$tab.closeOpenPage(obj);
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            if (this.form.id != null) {
              updateAddress(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.close();
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              addAddress(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
               this.close();
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
    }
  }
</script>

<style lang="scss" scoped>
  .input-width{
    width: 9vw;
    margin-right: 10px;
  }

  .mainDiv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .main_container {
    width: 100%;
    height: 100%;
  }
  .el-card {
    margin-bottom: 5px;
  }
  .el-footer {
    background-color: #ffffff;
    color: #333;
    text-align: right;
    line-height: 60px;
    border-top: 1px solid #e6ebf5;
    box-shadow: 0px 0px 10px #cdcdcd;
    z-index: 1000;
  }
  .footer-class {
    text-align: right;
    margin-top: 15px;
  }
  //顶部距离css
  .topItem {
    margin-bottom: 0px;
  }
  .areaSelect {
    width: 100%;
    padding-right: 5px;
  }
</style>
